<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>课程名称</p>
            <p>{{ initData.name }}</p>
          </el-col>
          <el-col :span="8">
            <p>课程编号</p>
            <p>{{ initData.courseNo }}</p>
          </el-col>
          <el-col :span="8">
            <p>类型</p>
            <p>{{ getClassify(initData.courseClassify) }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <pane :id="$props.id" />
    </div>
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import { createDics } from '~/utils/util';
import pane from './tab-pane';
export default {
  components: {
    pane
  },
  props: ['id', 'pageHeight', 'updateRight'],
  data() {
    return {
      showInfo: false,
      loading: true,
      initData: {},
      CourseLecture: [],
      classifyList: [],
      levelDTOList: []
    }
  },
  watch: {
    id() {
      this.getInitData()
    },
    updateRight() {
      this.getInitData()
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getClassify(res) {
      return this.classifyList.children.some(v => v.dicCode === res)
        ? this.classifyList.children.filter(v => v.dicCode === res)[0].dicName
        : '';
    },
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    jumpId() {
      this.$emit('editor')
    },
    getInitData() {
      this.$post({
        url: mmUrl.course.loadedit,
        data: {
          id: this.$props.id
        }
      }).then(res => {
        this.initData = res.course
        this.CourseLecture = res.CourseLecture
        this.classifyList = res.classifyList
        this.levelDTOList = res.levelDTOList
        this.loading = false
        this.showInfo = true
        this.$nextTick(() => {
          this.$refs['info']
            ? (this.$refs['info'].style.height = this.$props.pageHeight + 'px')
            : '';
        })
      })
    }
  }
}
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
</style>
